<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="img" style="float: left; text-align: left">
      <img src="./logo2.png" alt="" style="width: 120px" />
    </div>
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="./echarts.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};
      var barWidth = "auto";
      var option;
      var colors = [
        "#f2ca6b",
        "#91CC75",
        "#EE6666",
        "#87e8de",
        "#389e0d",
        "#061178",
      ];
      var lesscolors = [
        "#f2ca6b",
        "#91CC75",
        "#EE6666",
        "#87e8de",
        "#061178",
      ];
      var labelOption = {
        show: true,
        position: "top",
        distance: 15,
        align: "center",
        formatter: function ({ data, value }) {
          const { zzl = "", name } = data;
          const res = zzl.includes("-")
            ? [`\n${name}`, `同期增长率:\n{a|${zzl}%}\n`, `{c|${value}}`]
            : [`\n${name}`, `同期增长率:\n{b|${zzl}%}\n`, `{c|${value}}`];
          //   return `同期增长率：\n${zzl}% \n\n${value} `;
          if (value === "0") {
            return name
          }
          return zzl === ""
            ? [`${name}`, `{c|${value}}`].join("\n")
            : res.join("\n");
        },
        fontSize: 12,
        rich: {
          a: {
            color: "red",
          },
          b: {
            color: "green",
          },
          c: {
            color: "black",
          },
        },
      };
      option = {
        baseOption: {
          color: colors,
          timeline: {
            axisType: "category",
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 200000,
            // controlStyle: {
            //     position: 'left'
            // },
            // data: ["一月", "二月", "三月", "四月", "五月", "六月"],
            data: ["", "", "上半年", "8月"],
          },
          tooltip: {
            // show: false
          },
          legend: {
            show: true,
            top: 80,
            data: [
              { name: "一建" },
              { name: "三箭" },
              { name: "四建" },
              { name: "安装" },
              { name: "建工集团" },
            ],
          },
          calculable: true,
          grid: {
            top: 120,
            bottom: 100,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace("\n", "");
                  },
                },
              },
            },
          },
          xAxis: [
            {
              type: "category",
              axisLabel: { interval: 0 },
              data: ["中标金额(万元)", "中标面积(平方米)", "新签合同额(万元)"],
              splitLine: { show: false },
            },
          ],
          yAxis: [
            {
              // show: false,
              type: "value",
              name: "",
              max: function (value) {
                return parseInt(value.max * 1.1);
              },
              // axisLabel: {
              //   formatter: "{value}万元",
              // },
            },
          ],
          series: [
            {
              type: "bar",
              name: "一建",
              label: labelOption,
              barMinHeight: 40,
              emphasis: {
                focus: "series",
              },
            },

            {
              type: "bar",
              name: "三箭",
              label: labelOption,
              barMinHeight: 40,
              emphasis: {
                focus: "series",
              },
            },

            {
              type: "bar",
              name: "四建",
              label: labelOption,
              barMinHeight: 40,
              emphasis: {
                focus: "series",
              },
            },

            {
              type: "bar",
              name: "安装",
              label: labelOption,
              barMinHeight: 40,
              emphasis: {
                focus: "series",
              },
            },
            {
              type: "bar",
              name: "建工集团",
              label: labelOption,
              barMinHeight: 40,
              emphasis: {
                focus: "series",
              },
            },
          ],
        },
        options: [
          {
            title: {
              text: "济南建工集团2023年第一季度所属企业中标数据分析图",
              x: "center",
              y: "top",
              textAlign: "left",
              textStyle: {
                fontSize: 30,
                lineHeight: 60,
                height: 100,
              },
            },
            series: [
              {
                data: [
                  { name: "一建", value: "55872.54", zzl: "-37.70" },
                  { name: "一建", value: "206082.81", zzl: "-24.43" },
                  { name: "一建", value: "114824.30", zzl: "138.44" },
                ],
              },
              {
                data: [
                  { name: "三箭", value: "111955.35", zzl: "92.81" },
                  { name: "三箭", value: "318214.15", zzl: "40.27" },
                  { name: "三箭", value: "186698.04", zzl: "308.56" },
                ],
              },

              {
                data: [
                  { name: "四建", value: "162896.28", zzl: "79.23" },
                  { name: "四建", value: "437225.20", zzl: "27.05" },
                  { name: "四建", value: "168061.83", zzl: "78.13" },
                ],
              },
              {
                data: [
                  { name: "安装", value: "16730.49", zzl: "-15.94" },
                  { name: "安装", value: "0", zzl: "/" },
                  { name: "安装", value: "16730.49", zzl: "-48.97" },
                ],
              },
              {
                data: [
                  { name: "建工集团", value: 347454.66, zzl: "34.39" },
                  { name: "建工集团", value: 961522.16, zzl: "15.44" },
                  { name: "建工集团", value: 486314.66, zzl: "120.07" },
                ],
              },
            ],
          },
          {
            title: {
              text: "济南建工集团2023年第二季度所属企业中标数据分析图",
              x: "center",
              y: "top",
              textAlign: "left",
              textStyle: {
                fontSize: 30,
                lineHeight: 60,
                height: 100,
              },
            },
            legend: {
              show: true,
              top: 80,
              data: [
                { name: "一建" },
                { name: "三箭" },
                { name: "四建" },
                { name: "安装" },
                { name: "建材科技" },
                { name: "建工集团" },
              ],
            },
            series: [
              {
                type: "bar",
                name: "一建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "一建", value: "174600.48", zzl: "56.40" },
                  { name: "一建", value: "557984.91", zzl: "58.68" },
                  { name: "一建", value: "277944.80", zzl: "12.61" },
                ],
              },
              {
                type: "bar",
                name: "三箭",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "三箭", value: "42730.54", zzl: "-57.37" },
                  { name: "三箭", value: "110899.84", zzl: "-63.43" },
                  { name: "三箭", value: "11564.43", zzl: "-81.87" },
                ],
              },
              {
                type: "bar",
                name: "四建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "四建", value: "60392.10", zzl: "62.93" },
                  { name: "四建", value: "183103.82", zzl: "235.58" },
                  { name: "四建", value: "43577.04", zzl: "252.36" },
                ],
              },

              {
                type: "bar",
                name: "安装",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "安装", value: "7121.68", zzl: "-54.46" },
                  { name: "安装", value: "0", zzl: "/" },
                  { name: "安装", value: "7121.68", zzl: "-61.69" },
                ],
              },
              {
                type: "bar",
                name: "建材科技",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "建材科技", value: "13100", zzl: "" },
                  { name: "建材科技", value: "0", zzl: "/" },
                  { name: "建材科技", value: "0", zzl: "" },
                ],
              },
              {
                type: "bar",
                name: "建工集团",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: '建工集团', value: 360125.88, zzl: "36.11" },
                  // { name: '建工集团', value: 993888.85, zzl: "40.09" },
                  // { name: '建工集团', value: 177554.45, zzl: "12.49" },
                  { name: "建工集团", value: 297944.8, zzl: "12.61" },
                  { name: "建工集团", value: 851988.57, zzl: "20.09" },
                  { name: "建工集团", value: 177554.45, zzl: "12.49" },
                ],
              },
            ],
          },
          {
            title: {
              text: "济南建工集团2023年上半年(1-6月)所属企业中标数据分析图",
              x: "center",
              y: "top",
              textAlign: "left",
              textStyle: {
                fontSize: 30,
                lineHeight: 60,
                height: 100,
              },
            },
            legend: {
              show: true,
              top: 80,
              data: [
                { name: "一建" },
                { name: "三箭" },
                { name: "四建" },
                { name: "安装" },
                { name: "建材科技" },
                { name: "建工集团" },
              ],
            },
            series: [
              {
                type: "bar",
                name: "一建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "一建", value: "292654.10", zzl: "45.36" },
                  // { name: "一建", value: "905968", zzl: "45.10" },
                  // { name: "一建", value: "230115.60", zzl: "106.86" },
                  { name: "一建", value: "230473.02", zzl: "14.48" },
                  { name: "一建", value: "764067.72", zzl: "22.38" },
                  { name: "一建", value: "230115.60", zzl: "106.86" },
                ],
              },
              {
                type: "bar",
                name: "三箭",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "三箭", value: "154685.89", zzl: "-4.23" },
                  { name: "三箭", value: "429114.69", zzl: "-47.13" },
                  { name: "三箭", value: "198262.47", zzl: "81.07" },
                ],
              },

              {
                type: "bar",
                name: "四建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "四建", value: "223288.38", zzl: "74.50" },
                  { name: "四建", value: "620329.02", zzl: "55.59" },
                  // { name: "四建", value: "211638.87", zzl: "98.32" },
                  { name: "四建", value: "211638.87", zzl: "29.74" },
                ],
              },

              {
                type: "bar",
                name: "安装",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "安装", value: "23852.17", zzl: "-32.89" },
                  { name: "安装", value: "0", zzl: "/" },
                  { name: "安装", value: "23852.17", zzl: "-36.00" },
                ],
              },
              {
                type: "bar",
                name: "建材科技",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "建材科技", value: "13100", zzl: "" },
                  { name: "建材科技", value: "0", zzl: "/" },
                  { name: "建材科技", value: "0", zzl: "/" },
                ],
              },
              {
                type: "bar",
                name: "建工集团",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "建工集团", value: 707580.54, zzl: "35.26" },
                  { name: "建工集团", value: 1955411.71, zzl: "26.78" },
                  { name: "建工集团", value: 663869.1, zzl: "75.24" },
                  // { name: '建工集团', value: 645399.46, zzl: "23.37" },
                  // { name: '建工集团', value: 1813511.43, zzl: "17.58" },
                  // { name: '建工集团', value: 663869.1, zzl: "75.24" },
                ],
              },
            ],
          },
          {
            title: {
              text: "济南建工集团所属企业（当月中标）数据分析图",
              x: "center",
              y: "top",
              textAlign: "left",
              textStyle: {
                fontSize: 30,
                lineHeight: 60,
                height: 100,
              },
            },
            legend: {
              show: true,
              top: 80,
              data: [
                { name: "一建" },
                { name: "三箭" },
                { name: "四建" },
                { name: "安装" },
                { name: "建材科技" },
                { name: "建工集团" },
              ],
            },
            series: [
              {
                type: "bar",
                name: "一建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  // { name: "一建", value: "292654.10", zzl: "45.36" },
                  // { name: "一建", value: "905968", zzl: "45.10" },
                  // { name: "一建", value: "230115.60", zzl: "106.86" },
                  { name: "一建", value: "18890.92", zzl: "" },
                  { name: "一建", value: "48113.51", zzl: "" },
                  { name: "一建", value: "62913.80", zzl: "" },
                ],
              },
              {
                type: "bar",
                name: "三箭",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "三箭", value: "7712.82", zzl: "" },
                  { name: "三箭", value: "17435.18", zzl: "" },
                  { name: "三箭", value: "530.60", zzl: "" },
                ],
              },

              {
                type: "bar",
                name: "四建",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "四建", value: "10423.40", zzl: "" },
                  { name: "四建", value: "6632.01", zzl: "" },
                  { name: "四建", value: "24312.03", zzl: "" },
                ],
              },

              {
                type: "bar",
                name: "安装",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "安装", value: "1153.33", zzl: "" },
                  { name: "安装", value: "0", zzl: "/" },
                  { name: "安装", value: "1153.33", zzl: "" },
                ],
              },
              {
                type: "bar",
                name: "建材科技",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "建材科技", value: "13209.42", zzl: "" },
                  { name: "建材科技", value: "0", zzl: "/" },
                  { name: "建材科技", value: "13209.42", zzl: "/" },
                ],
              },
              {
                type: "bar",
                name: "建工集团",
                label: labelOption,
                barMinHeight: 0,
                barWidth,
                emphasis: {
                  focus: "series",
                },
                data: [
                  { name: "建工集团", value: 51389.90, zzl: "35.26" },
                  { name: "建工集团", value: 72180.7, zzl: "26.78" },
                  { name: "建工集团", value: 102119.18, zzl: "75.24" },
                  // { name: '建工集团', value: 645399.46, zzl: "23.37" },
                  // { name: '建工集团', value: 1813511.43, zzl: "17.58" },
                  // { name: '建工集团', value: 663869.1, zzl: "75.24" },
                ],
              },
            ],
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
        setTimeout(() => {
          myChart.dispatchAction({
          type: "timelineChange",
          currentIndex:2
        });
        }, 10);
      }
      myChart.on("timelinechanged", function ({ currentIndex }) {
        console.log(currentIndex, option);
        const { baseOption, options } = option;
        const indexOption = options[currentIndex];
        const color = currentIndex === 0 ? lesscolors : colors
        const newOption = {
          ...option,
          baseOption: {
            ...baseOption,
            color,
            timeline: {
              ...baseOption.timeline,
              currentIndex,
            },
          },
        };
        if (currentIndex !== 0) {
          (newOption.baseOption.series = indexOption.series),
            (newOption.baseOption.legend = indexOption.legend);
        }
        myChart.setOption(newOption, true);
      });
      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
